<template>
  <div id="rightBottom" style="height: 100%;">
    <div class="d-flex jc-around" style="padding: 25px;">
      <div style="position: relative;">
        <el-progress type="dashboard" :show-text="false" :stroke-width="10" color="#33e0fe" define-back-color="#264e81"
          text-color="#33e0fe" :percentage="100">
        </el-progress>
        <div class="progress-content">
          <div class="pro-num">{{ progressInfo.percentage1 }}</div>
          <div>{{ progressInfo.title1 }}</div>
        </div>
      </div>
      <div style="position: relative;">
        <el-progress type="dashboard" :show-text="false" :stroke-width="10" :percentage="progressInfo.percentage2"
          color="#2f84ff" define-back-color="#264e81"></el-progress>
        <div class="progress-content">
          <div class="pro-num" style="color:#2f84ff">{{ progressInfo.num2 }}/{{ progressInfo.percentage2 }}%</div>
          <div>{{ progressInfo.title2 }}</div>
        </div>
      </div>
      <div style="position: relative;">
        <el-progress type="dashboard" :show-text="false" :stroke-width="10" :percentage="progressInfo.percentage3"
          color="#76da91" define-back-color="#264e81"></el-progress>
        <div class="progress-content">
          <div class="pro-num" style="color:#76da91">{{ progressInfo.num3 }}/{{ progressInfo.percentage3 }}%</div>
          <div>{{ progressInfo.title3 }}</div>
        </div>
      </div>
    </div>
    <div class="carousel-tit-box">
      <div :class="active == index ? 'carousel-tit active' : 'carousel-tit'" v-for="(item, index) in titList"
        @click="switchCarousel(index)" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="scrollbar" style="height: 100%;">
      <!-- @row-click="transferUrl" -->
      <el-table :data="pageListData" height="calc(100% - 264px)" stripe v-if="active == 0">
        <el-table-column label="项目名称" align="center" prop="regionName" :show-overflow-tooltip="true" />
        <el-table-column label="设备名称" align="center" prop="categoryName" :show-overflow-tooltip="true" />
        <el-table-column label="告警描述" align="center" prop="propertyName" :show-overflow-tooltip="true" />
        <el-table-column label="告警级别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.level == 1" style="color: green">C级</span>
            <span v-if="scope.row.level == 2" style="color: yellow">B级</span>
            <span v-if="scope.row.level == 3" style="color: orangered">A级</span>
          </template>
        </el-table-column>
        <el-table-column label="告警时间" align="center" prop="createTime" width="160" />
      </el-table>
      <el-table :data="pageListData" height="calc(100% - 264px)" stripe v-else>
        <el-table-column label="项目名称" align="center" prop="regionName" :show-overflow-tooltip="true" />
        <el-table-column label="工单名称" align="center" prop="categoryName" :show-overflow-tooltip="true" />
        <el-table-column label="工单内容" align="center" prop="propertyName" :show-overflow-tooltip="true" />
        <el-table-column label="级别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.level == 1" style="color: green">C级</span>
            <span v-if="scope.row.level == 2" style="color: yellow">B级</span>
            <span v-if="scope.row.level == 3" style="color: orangered">A级</span>
          </template>
        </el-table-column>
        <el-table-column label="产生时间" align="center" prop="createTime" width="160" />
      </el-table>
      <pagination :total="total" v-show="total > queryParams.current" :pager-count="5" :background="false"
        :hide-on-single-page="true" layout="prev, pager, next" :page.sync="queryParams.current"
        :limit.sync="queryParams.size" @pagination="getInfoList" />
    </div>
    <!-- <el-dialog :title="title" :visible.sync="open" type="warning" show-icon :modal="false" width="13rem">
      <div class="dialog-zone">
        <el-tabs type="border-card" stretch :value="currentRow.zoneId">
          <el-tab-pane v-for="(item, index) in zoneDataList" :key="index" :label="item.zoneName" :name="item.id">
            <Zone :zone-item="item" :select-equipments="selectRow" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
// import {
//   equipmentAlarmPage,
//   selectZoneByRegionId,
// } from "@/api/ops/dashboard";
import { list1, list2 } from "./data"
// import Zone from "../../alarm/zone";

export default {
  data() {
    return {
      title: "实时监控",
      titList: ['设备告警', '工单信息'],
      active: 0,
      progressInfo: {
        title1: "月告警量",
        title2: "已处理",
        title3: "未处理",
        num1: 1562,
        num2: 1437,
        num3: 78,
        percentage1: 100,
        percentage2: 92,
        percentage3: 5,
      },
      open: false,
      // 总条数
      total: 0,
      pageListData: [],
      selectRow: [],
      currentRow: {},
      // zoneDataList: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 15,
      },
    };
  },
  // components: { Zone },
  props: {
    refreshNum: String,
  },
  watch: {
    refreshNum(val, oldVal) {
      this.getInfoList();
    },
  },
  created() { },
  mounted() {
    this.getInfoList();
  },

  methods: {
    getInfoList() {
      if (this.active == 0) {
        this.pageListData = list1
      } else {
        this.pageListData = list2
      }
      this.total = 188;
      // equipmentAlarmPage(this.queryParams).then((response) => {
      //   if (response.code == 0 && response.data != null) {
      //     this.pageListData = response.data;
      //     this.total = response.total;
      //   }
      // });
    },
    // transferUrl(row) {
    //   this.selectRow = [];
    //   this.currentRow = row;
    //   this.zoneDataList = [];
    //   selectZoneByRegionId({ regionId: row.regionId }).then((response) => {
    //     if (response.code == 0 && response.data != null) {
    //       this.open = true;
    //       this.selectRow.push({
    //         equipmentCode: row.equipmentCode,
    //         propertyCode: row.propertyCode,
    //       });
    //       this.zoneDataList = response.data;
    //     }
    //   });
    // },
    // handleClose() {
    //   this.zoneDataList = [];
    // },
    // 切换
    switchCarousel(index) {
      if (this.active == index) return
      this.active = index;
      if (index > 0) {
        this.progressInfo = {
          title1: "月工单量",
          title2: "完成情况",
          title3: "逾期工单",
          num1: 1562,
          num2: 1406,
          num3: 156,
          percentage1: 100,
          percentage2: 90,
          percentage3: 10,
        }
      } else {
        this.progressInfo = {
          title1: "月告警量",
          title2: "已处理",
          title3: "未处理",
          num1: 1562,
          num2: 1437,
          num3: 78,
          percentage1: 100,
          percentage2: 92,
          percentage3: 5,
        }
      }
      this.getInfoList()
    },
  },
};
</script>

<style lang="scss">
#rightBottom {
  padding: 0.2rem 0.2rem;
  // height: 6.5rem;
  height: 100%;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .progress-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 0.14rem;

    .pro-num {
      color: #33e0fe;
      font-size: 0.18rem;
      padding-bottom: 4px;
    }
  }

  .carousel-tit-box {
    display: flex;
    // justify-content: space-between;
    height: 0.4508rem;
    align-items: center;
    width: 100%;
    margin: 0 auto;

    .carousel-tit {
      width: 20%;
      text-align: center;
      background-image: url("~@/assets/background/btn2-1.svg");
      background-size: 100% 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.18rem;
      color: #374B87;
      cursor: pointer;

      &.active {
        background-image: url("~@/assets/background/btn2.svg");
        color: #fff;
      }
    }

  }


  .el-dialog__wrapper {
    .el-dialog {
      background-image: url("~@/assets/login/images/loginBg.jpg");
      background-size: 100% 100%;

      .el-dialog__body {
        background-color: transparent;
        border-radius: 0 0 5px 5px;
        padding: 10px 20px 20px 20px;
      }

      .el-dialog__header {
        background-color: transparent;

        .el-dialog__headerbtn {
          font-size: 20px;
        }

        .el-dialog__title {
          color: #c3cbde;
        }
      }

      .container-box {
        color: #c3cbde;
        display: grid;
        grid-gap: 0.25rem 0.25rem;
        grid-template-columns: 30% 30% 40%;
      }
    }
  }

  .el-table::before {
    height: 0px;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(4, 130, 175, 0.6);
  }

  .el-table {
    .error-row {
      background: rgba(255, 102, 0, 0.6);
    }

    background-color: transparent;
    color: #c3cbde;

    .el-table__header-wrapper {
      background-color: transparent;

      .el-table__header {
        background-color: transparent;
      }
    }

    tr {
      background-color: transparent;

      &.el-table__row--striped {
        td.el-table__cell {
          background-color: #022e53 !important;
        }
      }
    }

    th {
      background-color: #022e53 !important;
      color: rgb(77, 190, 222) !important;
      font-size: 0.16rem;
      font-weight: normal;
    }

    th.is-leaf {
      border-bottom: 0;
    }

    td {
      border-bottom: 0;
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      height: 0px;
    }

    .el-table__expanded-cell {
      background-color: rgba(19, 25, 47, 0.6);
    }
  }

  .el-tabs--border-card {
    background-color: transparent;
    border: 1px solid #2c81a6;
    box-shadow: 0px 0px 6px #2c81a6;

    .el-tabs__header {
      background-color: transparent;
      border-bottom: 1px solid #2c81a6;

      .el-tabs__item {
        color: #1890ff;
      }

      .el-tabs__item.is-active {
        background-color: #1a5cd7;
        color: #c3cbde;
        border-right-color: #2c81a6;
        border-left-color: #2c81a6;
        border-bottom-color: #2c81a6;
      }
    }
  }

  .pagination-container {
    background-color: transparent;
    text-align: center;

    .el-pagination {
      background-color: transparent;
      color: #c3cbde;

      button {
        background-color: transparent;
      }

      .btn-prev,
      .btn-next {
        background-color: transparent;
      }

      .el-pager li {
        background-color: transparent;
      }
    }
  }

  .scrollbar {
    height: 5.6rem;
    overflow-y: auto;
  }

  .scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(44, 88, 166, 0.9);
    background: #535353;
  }

  .scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(18, 44, 81, 0.9);
    border-radius: 5px;
    background: transparent;
  }
}
</style>
